<template>
  <div class="auth-config">
    <el-card shadow="hover" class="auth-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">表单权限配置</span>
          <div class="header-actions">
            <el-radio-group
              v-model="permSelect"
              size="small"
              @change="handlePermChange"
            >
              <el-radio-button label="R">全部只读</el-radio-button>
              <el-radio-button label="E">全部编辑</el-radio-button>
              <el-radio-button label="H">全部隐藏</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>

      <div class="table-wrapper">
        <el-table
          :data="fields"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
          border
          size="small"
        >
          <el-table-column prop="title" label="表单字段" min-width="120">
            <template #default="scope">
              <div class="field-name">
                <span v-if="scope.row.required" class="required-mark">*</span>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" width="240">
            <template #header>
              <span>权限设置</span>
            </template>
            <template #default="scope">
              <el-radio-group
                v-model="scope.row.perm"
                size="small"
                @change="() => handleItemChange(scope.row)"
              >
                <el-radio-button label="R">只读</el-radio-button>
                <el-radio-button label="E">编辑</el-radio-button>
                <el-radio-button label="H">隐藏</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";

const store = useStore();
const emit = defineEmits(["update:value"]);

const props = defineProps({
  readable: Boolean,
  node: {
    type: Object,
    default: () => ({}),
  },
  value: {
    type: Array,
    default: () => [],
  },
});

// 权限选择
const permSelect = ref("");
const fields = ref([]);

// 初始化表单字段
const initFields = () => {
  const config = store.state.form.config;
  fields.value = config.map((item) => ({
    id: item.id,
    name: item.name,
    required: item.options?.required,
    perm: "R", // 默认只读
  }));
  emit("update:value", fields.value);
};

// 处理权限切换
const handlePermChange = (type) => {
  if (!fields.value.length) return;

  // 更新所有字段的权限
  fields.value = fields.value.map((field) => ({
    ...field,
    perm: type,
  }));

  // 同步更新选中状态
  permSelect.value = type;

  // 触发更新
  emit("update:value", fields.value);
};

// 处理单项选择
const handleItemChange = (field) => {
  // 检查是否所有项都选择了相同的权限
  const allSamePerm = fields.value.every((item) => item.perm === field.perm);
  if (allSamePerm) {
    permSelect.value = field.perm;
  } else {
    permSelect.value = ""; // 如果不是全部相同，清空全选状态
  }

  emit("update:value", fields.value);
};

// 监听外部值变化
watch(
  () => props.value,
  (newValue) => {
    if (newValue && newValue.length) {
      // 更新本地数据
      fields.value = fields.value.map((field) => {
        const matchField = newValue.find((item) => item.id === field.id);
        return {
          ...field,
          perm: matchField ? matchField.perm : field.perm,
        };
      });

      // 检查是否需要更新全选状态
      const firstPerm = fields.value[0]?.perm;
      const allSamePerm = fields.value.every((item) => item.perm === firstPerm);
      permSelect.value = allSamePerm ? firstPerm : "";
    }
  },
  { immediate: true }
);

// 监听 store 中的配置变化
watch(
  () => store.state.form.config,
  (newConfig) => {
    if (newConfig && newConfig.length) {
      initFields();
      // 初始化后检查是否需要设置全选状态
      const firstPerm = fields.value[0]?.perm;
      const allSamePerm = fields.value.every((item) => item.perm === firstPerm);
      permSelect.value = allSamePerm ? firstPerm : "";
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.auth-config {
  padding: 10px;

  .auth-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    :deep(.el-card__header) {
      padding: 12px 15px;
      border-bottom: 1px solid #f0f2f5;
    }

    :deep(.el-card__body) {
      padding: 15px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-title {
      font-size: 15px;
      font-weight: 500;
      color: #303133;
    }
  }

  .field-name {
    display: flex;
    align-items: center;
    gap: 4px;

    .required-mark {
      color: #f56c6c;
      font-weight: bold;
    }
  }

  :deep(.el-table) {
    --el-table-border-color: #ebeef5;

    th {
      font-weight: 500;
      color: #606266;
      height: 40px;
      padding: 6px 0;
      background: #f5f7fa;
    }

    td {
      padding: 6px 0;
    }
  }

  :deep(.el-radio-group) {
    .el-radio-button__inner {
      padding: 6px 12px;
    }
  }

  :deep(.el-radio-button__inner) {
    font-size: 12px;
  }

  // 表格中的单选按钮组样式
  :deep(.el-table .el-radio-group) {
    display: flex;
    justify-content: center;

    .el-radio-button__inner {
      padding: 4px 12px;
    }
  }
}

// 响应式优化
@media screen and (max-width: 768px) {
  .auth-config {
    padding: 5px;

    .card-header {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
    }
  }
}
</style>